<HTML>
<head>
<title>Lost-sector.net</title><link href='http://www.lost-sector.net/favicon.ico' rel='icon' type='image/x-icon'/>
<style type="text/css">

#blog-outer{background:none;width:980px;text-align:left;font:11px Tahoma;margin:30px auto;padding:8px;box-shadow:0 5px 10px #555;-moz-box-shadow:0 5px 10px #555;-webkit-box-shadow:0 5px 10px #555}

#menuwrapperpic{width:100%;min-width:980px;position:fixed;top:0;left:0;right:0;height:28px;font-size:13px;z-index:99;background-color:#1E6510;border-bottom:1px solid #000;box-shadow:2px 1px 3px 1px}
#menuwrapper{width:995px;height:28px;margin:0 auto;}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:995px}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0;}
#menubar a{display:block;text-decoration:none;font-size:12px;text-transform:none;font-weight:700;color:#fff;padding:8px 12px 5px 12px;border-left:1px solid #39572E; border-right:0px solid #353F31;text-shadow:0 1px 1px #000;}
#menubar a.trigger{background-image:url(#);background-repeat:no-repeat;background-position:right center;padding:8px 12px 5px 12px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:150px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:50;position:absolute;display:none;background:#26231c;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#1E6510;color:#ffff00;-webkit-transition: background-color .555s;-moz-transition: background-color .555s;-o-transition: background-color .555s;-ms-transition: background-color .555s;}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #433e31;border-top:1px solid #11100d;display:block;font-size:1px;height:0;line-height:0;}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

#menu-right{float:right;display:inline;width:160px;padding-top:5px;margin-right:5px}
#topsearch1 #feed-1{margin-top:0;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#333}
#topsearch1 #feed-s{width:126px}
#search{height:18px;width:150px;background:#aeaeae;padding:0}
#search input{border:0;background:none;color:#575757}
#s{font-size:12px;width:120px;padding-left:4px;background:none;margin:0}
#topsearch #search{margin-top:0;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#fff;border:1px solid #999}
#topsearch #s{width:125px}

h1{font:normal bold 32px Tahoma;line-height:1.4em;text-transform:none;color:#333333;margin:auto;width:100%;text-align:center}
h2{font:normal bold 11px Tahoma;line-height:1.4em;text-transform:none;color:#333333;margin:.5em 0 .25em}

#post-body {background:#fff;border:1px solid silver;margin:auto;padding:10px 15px}
#post-body h2{font-family:'Tahoma', Trebuchet, Verdana, Serif;font-size:16px;font-weight:700;color:#0B0B61;margin:5px 0 0;padding:0 0 4px;text-shadow:1px 0px #eee, 1px 0px #ddd, 1px 1px #ddd, 2px 2px #bbb;}
#post-body h2 a,#post-body h2 a:visited,#post-body h2 strong{display:block;text-decoration:none;color:#0B0B61;font: 16px Tahoma;font-weight:600}
#post-body h2 strong,#post-body h2 a:hover{color:#111}
#post-body {border-top:1px dashed #ccc;padding-top:10px;margin:auto 0px .75em;text-align:justify;font:13px Tahoma;line-height:1.5em}
#post-body p{margin:15px 0px .75em 40px;text-align:justify;font:13px Tahoma;line-height:1.5em}
#post-body img {width:0px;height:0px;float:left;margin:0px 10px 0px 0px}
#post-body img:hover{opacity: 0.8;filter:alpha(opacity=80); }

#credit{background:#101010;width:100%;line-height:1.6em;text-align:center;font-family:Arial;font-size:14px;color:#0b5394;text-shadow:3px 3px 3px #000;overflow:hidden;clear:both;margin:0 auto;padding:10px 0 10px 0px}
#credit a:link,#credit a:visited{color:#ccc;text-decoration:none}

pre {
  background-color:white;
  background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
  -webkit-background-size:30px 30px;
  -moz-background-size:30px 30px;
  -ms-background-size:30px 30px;
  -o-background-size:30px 30px;
  background-size:30px 30px;
  background-repeat:repeat;
  font:normal bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
  color:#333;
  border:2px solid #666;
  position:relative;
  padding:0 7px;
  margin:10px 0;
  overflow:auto;
  word-wrap:normal;
  white-space:pre;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
  position:relative;
}

pre[data-codetype] {
  padding:29px 1em 7px 1em;
}

pre[data-codetype]:before {
  content:attr(data-codetype);
  display:block;
  position:absolute;
  top:0;
  right:0;
  left:0;
  background-color:#666;
  padding:0 7px;
  font:bold 11px/20px Arial,Sans-Serif;
  color:white;
}

pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;}
pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;}
pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;}
pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;}
pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;}
pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;}

pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
pre[data-codetype="CSS"]:before {background-color:#7B990C;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#395540;}
pre[data-codetype="PHP"]:before {background-color:#FF9900;}
pre[data-codetype="XML"]:before {background-color:#FF0C39;}


</style>
</head>
<body>

<!--Start Header 01-->
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li class='home'><a href='http://www.lost-sector.net/'>LOSTSECTOR BLOG'S &#10157;</a></li>
<li><a href='http://www.lost-sector.net/2013/03/tag-pre-blog-tema-vanilla.html'>BACK TO TUTORIAL &#10157;</a></li>
</ul>

</div>
</div>
<!--End Of Header 01-->

<div id='blog-outer'><!--START OUTER-->

<div id='post-body'>
<div style="text-align: center;">
<h2>Lostsector Blog's | Demo Tag Pre Tema Vanilla</h2>
<!-- Begin: http://adsensecamp.com/ -->
<script src="http://adsensecamp.com/show/?id=aHPGthOhMTU%3D&cid=1mKE6FR8OXo%3D&chan=5LC6%2ByGBW44%3D&type=1&title=0000FF&text=000000&background=FFFFFF&border=000000&url=3D81EE" type="text/javascript">
</script>
<!-- End: http://adsensecamp.com/ -->
</div>

<pre data-codetype="HTML">
&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;Sample Page&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Lorem Ipsum&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
    &lt;/body&gt;
&lt;/html
</pre>

<pre data-codetype="CSS">
#header-wrapper {
  background:#333;
  color:white;
  border-bottom:10px solid #ccc;
  text-align:left;
  transition:all .5s ease-out;
  padding:8px 0 18px;
}

#header {
  margin:0 15px;
}

#header-logo {
  position:relative;
  width:84px;
  height:35px;
  display:block;
  margin:10px 30px 5px;
}
</pre>

<pre data-codetype="JavaScript">
(function() {
    var html5 = (&quot;abbr,article,aside,audio,canvas,datalist,details,&quot; + &quot;figure,footer,header,hgroup,mark,menu,meter,nav,output,&quot; + &quot;progress,section,time,video&quot;).split(&#039;,&#039;);
    for (var i = 0; i &lt; html5.length; i++) {
        document.createElement(html5[i]);
    }
    try {
        document.execCommand(&#039;BackgroundImageCache&#039;, false, true);
    } catch(e) {}
})();
</pre>

<pre data-codetype="JQuery">
function generate() {
    var a = $(&#039;#container&#039;).html();
    var b = window.open(&#039;&#039;,&#039;&#039;,&#039;width=600,height=400&#039;);
        b.document.write(&#039;&lt;textarea&gt;&#039; + a + &#039;&lt;/textarea&gt;&#039;);
}
</pre>

<pre data-codetype="PHP">
&lt;?php

header(&#039;Content-type: application/json; charset: utf-&#039;.&#039;8&#039;);
// header(&#039;Cache-Control: must-revalidate&#039;);

$url = &#039;http://api.flickr.com/services/feeds/photos_public.gne?format=json&amp;nojsoncallback=1&#039;;

if (!empty($_REQUEST[&#039;tags&#039;])) {
    $url .= &#039;&amp;tags=&#039; . urlencode($_REQUEST[&#039;tags&#039;]);
}

echo file_get_contents($url);

?&gt;
</pre>

<pre data-codetype="XML">
&lt;b:if cond=&#039;data:title != &amp;quot;DTE :]&amp;quot;&#039;&gt;
    &lt;h2 class=&#039;title&#039;&gt;
        &lt;data:title/&gt;
    &lt;/h2&gt;
&lt;/b:if&gt;
</pre>

<div style="text-align: center;">
<b><a href="https://www.blogger.com/profile/12498154895748901142">Lostsector Blog's - Author's Profile</a></b></div>
</div>

</div>

<div id='credit'>
<a href='https://plus.google.com/108801075003252823592/' rel='publisher'>Design, Tutorial, Widgets dan Tips Tricks Blogger | Lostsector Blog's</a> &#169; 2011 - 2013. All Rights Reserved
</div>


</div><!--End Of Outer-->
</body>
</HTML>